<template>
    <div>
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
            <span>确认要删除该条数据吗?</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleClose">确 定</el-button>
            </span>
        </el-dialog>
        <div class="search">
            <el-form label-width="80px">
                <el-row>
                    <el-col :span="6" style="padding: 0 8px;">
                        <el-form-item label="商家名称">
                            <el-select size="small" style="width: 100%;"  v-model="searchObject.shopId" filterable clearable
                                       placeholder="请选择">
                                <el-option v-for="item in shopIdOptions" :key="item.id"
                                           :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" style="padding: 0 8px;">
                        <el-form-item label="商品分类">
                            <el-select size="small" style="width: 100%;"  v-model="searchObject.productCatalog" filterable clearable
                                       placeholder="请选择">
                                <el-option v-for="item in productCatalogOptions" :key="item.id"
                                           :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" style="padding: 0 8px;">
                        <el-form-item label="商品编码">
                            <el-input v-model="searchObject.barCode" size="small" placeholder="商品编码" name="barCode">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" style="padding: 0 8px;">
                        <el-form-item label="商品名称">
                            <el-input v-model="searchObject.name" size="small" placeholder="商品名称" name="name">
                            </el-input>
                        </el-form-item>
                    </el-col>

            <el-col :span="24" style="padding: 0 10px;margin-top: 5px;">
                <el-row type="flex" justify="end">
                    <el-button size="small" type="primary" @click="search">搜索</el-button>
                    <el-button size="small" plain @click="clearData">清除条件</el-button>
                </el-row>
            </el-col>
            </el-row>
            </el-form>
        </div>
        <div class="data-content">
            <div  class="tool-add">
                <el-button type="primary" size="small" @click="addView">新增</el-button>
            </div>

            <el-table v-loading="loading" :data="tableData.list"   @sort-change="changeTableSort" style="width: 100%;font-size: 12px;">
                        <el-table-column label="商品编码"

                                        prop="barCode"
                        
                         width="100"  
                        >
                        </el-table-column>
                        <el-table-column label="商品介绍"

                                        prop="note"
                        
                         width="100"  
                        >
                        </el-table-column>
                        <el-table-column label="规格"

                                        prop="model"
                        
                         width="100"  
                        >
                        </el-table-column>
                        <el-table-column label="商家名称"

                                        prop="shopName"
                        
                         width="100"  
                        >
                        </el-table-column>
                        <el-table-column label="商品分类"

                                        prop="productCatalogName"
                        
                         width="100"  
                        >
                        </el-table-column>
                        <el-table-column label="商品名称"

                                        prop="name"
                        
                         width="100"  
                        >
                        </el-table-column>
                        <el-table-column label="是否开票"

                                        prop="invoice"
                        
                         width="100"  
                        >
                        </el-table-column>
                        <el-table-column label="商品状态"

                                        prop="status"
                        
                         width="100"  
                        >
                        </el-table-column>
                        <el-table-column label="号"

                                        prop="itemNumber"
                        
                         width="100"  
                        >
                        </el-table-column>
                        <el-table-column label="销售价"

                                        prop="salePrice"
                        
                         width="100"  
                        >
                        </el-table-column>
                        <el-table-column label="市场价"

                                        prop="marketPrice"
                        
                         width="100"  
                        >
                        </el-table-column>
                        <el-table-column label="成本价"

                                        prop="costPrice"
                        
                         width="100"  
                        >
                        </el-table-column>
                        <el-table-column label="积分"

                                        prop="score"
                        
                         width="100"  
                        >
                        </el-table-column>
                        <el-table-column label="vip价"

                                        prop="vipPrice"
                        
                         width="100"  
                        >
                        </el-table-column>
                        <el-table-column label="库存量"

                                        prop="inventory"
                        
                         width="100"  
                        >
                        </el-table-column>
                        <el-table-column label="库存预警值"

                                        prop="warningValue"
                        
                         width="100"  
                        >
                        </el-table-column>
                <el-table-column width="180" align="center" fixed="right" label="操作">
                    <template slot-scope="scope">
                         <el-button type="text" size="mini" icon="el-icon-info" @click="show(scope.row)">详情
                         </el-button>

                         <el-button type="text" size="mini" icon="el-icon-edit" @click="editView(scope.row)">编辑
                         </el-button>

                         <el-button type="text" icon="el-icon-delete" class="danger" size="mini" style="cursor: pointer;"
                                @click="deleteData(scope.row)">删除
                         </el-button>                   
                    </template>
                </el-table-column>
                </el-table>

            <div class="page">
                <el-pagination background :current-page="searchObject.no" :page-sizes="[10, 20, 50, 100]"
                            :page-size="tableData.size" :pager-count="5"
                            layout="total, sizes, prev, pager, next, jumper" :page-count="tableData.totalPage"
                            :total="tableData.total" @size-change="sizeChange" @current-change="pageChange">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
  import common from "@/mixins/common.js";
  var config = {};


  config.methods = {};
  config.methods.addView = function () {
    this.$router.push({
      path: 'add'
    });
  }
  config.methods.auditView = function (row) {
    this.selectData = row;
    this.auditVisible = true;
    this.form.name = row.name;
    this.form.logo = row.logo;
    this.form.id = row.id;

    this.form.auditState = "";
  }


  config.methods.editView = function (row) {
    var data = {};
    data.id = row.id;
    this.$router.push({
      path: 'update',
      query: data
    });

  }

  config.methods.changeTableSort = function (column) {
    this.searchObject.sortField = column.prop;
    if ("descending" == column.order) {
      this.searchObject.sortMethod = "desc";
    } else if ("ascending" == column.order) {
      this.searchObject.sortMethod = "asc";
    } else {
      this.searchObject.sortMethod = "";
    }
    this.getSearchList();
  }
  config.methods.show = function (row) {
    var param = {};
    param.id = row.id;
    this.$router.push({
      path: 'view',
      query: param
    });

  }

  config.methods.handleSelect = function (index) {
    if (index == "1") {
      this.searchObject.auditState = "checked"
    } else if (index == "2") {
      this.searchObject.auditState = "wait"
    } else if (index == "3") {
      this.searchObject.auditState = "fail"
    } else {
      this.searchObject.auditState = ""
    }
    this.activeIndex = index;
    this.getSearchList();
  }

  config.methods.sizeChange = function (event) {
    this.searchObject.size = event;
    this.getSearchList();
  }
  config.methods.pageChange = function (index) {
    this.searchObject.no = index;
    this.getSearchList();
  }
  config.methods.getSearchList = function () {
    this.loading = true;
    var data = this.searchObject;
    var self = this;
    this.postData("/tenantRest/product/search.htm", data, function (result) {
      if (result.code == 0) {
        self.tableData = result;
      }
      setTimeout(function () {
        self.loading = false;
      }, 300)
    });
  }
  config.methods.search = function () {
    this.searchObject.no = 1;
    this.getSearchList();
  }
  config.methods.clearData = function () {
    this.searchObject.name = "";
    this.searchObject.address = "";
    this.searchObject.shopState = "";
  }
  config.methods.deleteData = function (event) {
    this.selectId = event.id;
    this.dialogVisible = true;
  }

  config.methods.handleClose = function () {
    this.dialogVisible = false;
    var self = this;
    if (self.selectId) {
      var params = {};
      params.id = self.selectId;
      this.postData("/tenantRest/product/delete.htm", params, function (res) {
        if (res.code == 0) {
          self.$message({
            message: '删除数据成功',
            type: 'success'
          });
          self.getSearchList();
        } else {
          self.$message.error(res.msg);
        }
      });
    }

  }

  config.computed = {};

  config.data = function () {
    return {
            searchObject: {
                no: 1,
                size: 10,
                    shopId:'',
                    productCatalog:'',
                    barCode:'',
                    name:''            },
              shopOptions: [],
              productCatalogOptions: [],
            dialogVisible: false,
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            loading: false,
            tableData: {},
    }
  };
  config.methods.showAddView = function () {
    this.$router.push({
      path: 'add'
    });
  };

		config.methods.loadShopOptions= function(){
				var self=this;
				var param = {};
				param.sortMethod = "asc";
				param.sortField = "id";
				param.level =1;
				param.size =500;
				param.fetch=0;
				this.postData("/tenantRest/shop/list.htm", param, function (result) {
					if (result.code == 0) {
              self.shopOptions= result.list;
					}
				});
		}

		config.methods.loadProductCatalogOptions= function(){
				var self=this;
				var param = {};
				param.sortMethod = "asc";
				param.sortField = "id";
				param.level =1;
				param.size =500;
				param.fetch=0;
				this.postData("/tenantRest/productcatalog/list.htm", param, function (result) {
					if (result.code == 0) {
              self.productCatalogOptions= result.list;
					}
				});
		}



  config.mounted = function () {
         this.loadShopOptions();
         this.loadProductCatalogOptions();
    this.getSearchList();
  }
  config.mixins = [common];

  export default config;
</script>

<style scoped>

</style>